<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{asset(env("CDN_HOST")."/public/resource/webuploader/webuploader.css")}}">
<style>
    .classify-div {
        margin-top: 1vh;
        display: inline-block;
        /*width: 49%;*/
        min-height: 50vh;
        height: auto;
        float: left;
        /*background: #000;*/
    }

    .left {
        border-right: 3px solid #666666;
    }

    .edit-pci-edit, .edit-pci-minus, .empty-pci-empty {
        display: inline-block;
        float: right;
        font-size: 1.4rem;
    }

    .parent_classify_info {
        padding: .5rem 0;
        font-size: 2rem;
        text-align: center;
        background: #f9fafc;
    }

    .glyphicon, .parent_classify, .children_classify {
        cursor: pointer;
    }

    .right {
        border-right: 3px solid #666666;
    }

    .edit-cci-edit, .edit-cci-minus {
        display: inline-block;
        float: right;
    }

    .children_classify_info {
        padding: .5rem 0;
        text-align: center;
        background: #f9fafc;
    }

    .children_classify_img {
        width: 100px;
        height: 100px;
    }

    .cc_info_div {
        float: left;
    }

    .cc_info_left {
        width: 30%;
    }

    .cc_info_right {
        width: 60%;
        font-size: 2rem;
    }
</style>
@include('base.loading_admin')
<main id="add_classify" class="add_classify">
    <nav id="add_classify_nav" class="add_classify_nav">
        <ul class="nav nav-pills ">
            <li role="presentation" class="active"><a href="{{asset($nav['one']['url'])}}">{{$nav['one']['name']}}</a>
            </li>
        </ul>
    </nav>
    <div class="classify row">
        <div class="left classify-div col-md-4">
            <h5 for="" class="col-md-12"><span class="col-md-9">顶级分类</span>
                <button class="col-md-3" id="add_parent_classify">添加</button>
            </h5>
            <div class="add_parent_classify_box col-md-12">
                <div class="form-group col-md-12">
                    <input type="text" class="form-control" id="addTextName" placeholder="">
                    <label for="addTextName" class="control-label col-md-12">
                        <span style="display: inline-block;float: right">
                            <span class="glyphicon glyphicon-ok c-success add-pci-ok" aria-hidden="true"></span>&ensp;&ensp;&ensp;&ensp;
                            <span class="c-danger add-pci-remove glyphicon glyphicon-remove" aria-hidden="true"></span>
                        </span>
                    </label>
                </div>
            </div>
            <div class="parent_classify_list col-md-12">
                @foreach($classify as $key => $value)
                    <div class="parent_classify_info col-md-12" data-id="{{$value['commodity_classify_id']}}">
                        <span class="parent_classify col-md-10">{{$value['classify_name']}}</span>
                        <span class="c-danger edit-pci-minus glyphicon glyphicon-minus" aria-hidden="true"></span>
                        <span class="glyphicon empty-pci-empty">&ensp;&ensp;</span>
                        <span class="glyphicon glyphicon-edit c-waring edit-pci-edit" aria-hidden="true"></span>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="right classify-div col-md-7">
            <h5 for="" class="col-md-12"><span class="col-md-10">二级分类</span>
                <button class="col-md-2" id="add_children_classify">添加</button>
            </h5>
            <div style="clear: both;"></div>
            <div class="add_children_classify_box">
                <div class="tab-pane" id="upload-pic"
                     style="margin-bottom: -3.5em; margin-top: 0.5em;width: 100%;">
                    <!--文件上传-->
                    <div id="uploader" class="uploaderBox">
                        <!--用来存放文件信息-->
                        <div id="uploaderList" class="uploader-list"></div>
                        <div class="btns">
                            <div id="uploaderPicker">选择文件</div>
                            <button id="ctlBtn" class="btn btn-default">开始上传</button>
                        </div>
                    </div>
                </div>
                <div style="width: 100%;height: 8vh"></div>
                <div class="form-group" style="width: 100%;">
                    <div class="col-md-12">
                        <input type="text" class="form-control col-md-4" id="addClassifyName" placeholder="">
                        <label for="addClassifyName" class="control-label col-md-12">
                        <span style="display: inline-block;float: right">
                            <span class="glyphicon glyphicon-ok c-success add-cci-ok" aria-hidden="true"></span>&ensp;&ensp;&ensp;&ensp;
                            <span class="c-danger add-cci-remove glyphicon glyphicon-remove" aria-hidden="true"></span>
                        </span>
                        </label>
                    </div>
                    <div style="clear: both;"></div>
                </div>
            </div>
            <div class="children_classify_list col-md-12">

            </div>
        </div>
    </div>
</main>
<script>
    // window.location.reload()
    $(".add_children_classify_box").hide()
    $(".children_classify_list").on('click', '.edit-cci-minus', function () {
        let children_dd = $(this).parent().parent()
        if (!children_dd.attr("data-id")) {
            alert("非法操作")
            return false
        }
        if (!$("#add_children_classify").attr("data-id")) {
            alert("非法操作")
            return false
        }
        $.post('/admin/commodity/api_classify/delele_classify',
            {
                _token: $('meta[name="csrf-token"]').attr('content')
                , id: children_dd.attr("data-id")
                , parent: $("#add_children_classify").attr("data-id")
            },
            function (data) {
                children_classify_load(data.data)
            });
    })
    $("#add_classify").on('click', "#add_children_classify", function () {
        $(".add_children_classify_box").show()
    })
    $(".add_children_classify_box").on("click", ".add-cci-ok", function () {
        // up_img_url = "http://shop-1253123347.cos.ap-guangzhou.myqcloud.com/uploads/2018-03-10/img/2018-03-10-17-04-15-5aa39f8feb4f8.jpg";
        if (up_img_url == '') {
            alert('没有上传图片')
            return false
        }
        if (!$(".add_children_classify_box").attr("data-id")) {
            alert('非法操作')
            return false
        }
        if (!$('#addClassifyName').val()) {
            alert('请输入分类名')
            return false
        }
        loading.show()
        $.post('/admin/commodity/api_classify/add_classify',
            {
                _token: $('meta[name="csrf-token"]').attr('content'),
                name: $('#addClassifyName').val(),
                img: up_img_url,
                parent: $(".add_children_classify_box").attr("data-id"),
            },
            function (data) {
                if (data.errorCode) {
                    alert(data.errorMsg)
                }
                else {
                    children_classify_load(data.data)
                }
                loading.hide()
            }, 'json');
        $(".add_children_classify_box").hide()
    })
    $(".add_children_classify_box").on("click", ".add-cci-remove", function () {
        $(".add_children_classify_box").hide()
    })

    $(".children_classify_list").on('click', ".edit-cci-edit", function () {
        var children_div = $(this).parent()
        var origin_html = children_div.html()
        var origin_val = $(this).prev().prev().text()
        console.log(origin_val);
        var edit_dd_html = '<input type="text" class="col-md-12" id="updateClassifyName" value="">\n' +
            '                       <span style="display: inline-block;float: right">\n' +
            '                            <span class="glyphicon glyphicon-ok c-success edit-cci-ok" aria-hidden="true"></span>&ensp;&ensp;&ensp;&ensp;\n' +
            '                            <span class="c-danger edit-cci-remove glyphicon glyphicon-remove" aria-hidden="true"></span>\n' +
            '                        </span>'
        children_div.html(edit_dd_html)
        $("#updateClassifyName").val(origin_val)

        $(".edit-cci-remove").click(function () {
            children_div.html(origin_html)
        });
        $(".edit-cci-ok").click(function () {
            children_dd = children_div.parent();
            if (children_dd.find(".children_classify_img").attr("src") == '') {
                alert('没有上传图片')
                return false
            }
            if (!children_dd.attr("data-id")) {
                alert('非法操作')
                return false
            }
            if (!$('#updateClassifyName').val()) {
                alert('请输入分类名')
                return false
            }
            if (!$("#add_children_classify").attr("data-id")) {
                alert('非法操作')
                return false
            }
            loading.show()
            $.post('/admin/commodity/api_classify/update_classify',
                {
                    id: children_dd.attr("data-id"),
                    name: $("#updateClassifyName").val(),
                    img: children_dd.find(".children_classify_img").attr("src"),
                    parent: $("#add_children_classify").attr("data-id"),
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                function (data) {
                    if (data.errorCode) {
                        alert(data.errorMsg)
                    }
                    else {
                        uploader.reset()
                        $('#updateClassifyName').val('')
                        children_classify_load(data.data)
                    }
                    loading.hide()
                }, 'json');
        })
    })

    function children_classify_load(data) {
        let html = '';
        for (value in data) {
            html += '<dd class="children_classify_info col-md-12" data-id="' + data[value]['commodity_classify_id'] + '"><div class="cc_info_div cc_info_left" style="width: 30%;float: left"><img class="children_classify_img" src="' + data[value]['classify_index_img'] + '" alt="a"></div><div class="cc_info_div cc_info_right" ><span class="children_classify col-md-10">' + data[value]['classify_name'] + '</span><span class="c-danger edit-cci-minus col-md-1 glyphicon glyphicon-minus" aria-hidden="true"></span><span class="glyphicon glyphicon-edit c-waring col-md-1 edit-cci-edit" aria-hidden="true"></span></div></dd>'
        }
        $(".children_classify_list").html(html)
    }

    // ---------------------------------------------------------------------------
    $(".parent_classify_list").on('click', '.edit-pci-minus', function () {
        let parent_div = $(this).parent()
        if (!parent_div.attr("data-id")) {
            alert("非法操作")
            return false
        }
        $.post('/admin/commodity/api_classify/delele_classify',
            {
                id: parent_div.attr("data-id"),
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            function (data) {
                parent_classify_load(data.data)
            });
    })
    $(".add_parent_classify_box").hide()
    $("#add_classify").on('click', "#add_parent_classify", function () {
        $(".add_parent_classify_box").show()
    })
    $(".add_parent_classify_box").on("click", ".add-pci-ok", function () {
        if (!$('#addTextName').val()) {
            alert('请输入分类名')
            return false
        }
        $.post('/admin/commodity/api_classify/add_classify',
            {
                name: $('#addTextName').val(),
                img: '',
                parent: 0,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            function (data) {
                if (data.errorCode) {
                    alert(data.errorMsg)
                }
                else {
                    parent_classify_load(data.data)
                }
            }, 'json');
        $(".add_parent_classify_box").hide()
    })
    $(".add_parent_classify_box").on("click", ".add-pci-remove", function () {
        $(".add_parent_classify_box").hide()
    })

    $(".parent_classify_list").on('click', ".edit-pci-edit", function () {
        var parent_div = $(this).parent()
        var origin_html = parent_div.html()
        var origin_val = $(this).prev().prev().prev().text()
        var edit_dd_html = '<input type="text" class="col-md-12" id="updateTextName" value="">\n' +
            '                       <span style="display: inline-block;float: right">\n' +
            '                            <span class="glyphicon glyphicon-ok c-success edit-pci-ok" aria-hidden="true"></span>&ensp;&ensp;&ensp;&ensp;\n' +
            '                            <span class="c-danger edit-pci-remove glyphicon glyphicon-remove" aria-hidden="true"></span>\n' +
            '                        </span>'
        parent_div.html(edit_dd_html)
        $("#updateTextName").val(origin_val)

        $(".edit-pci-remove").click(function () {
            parent_div.html(origin_html)
        });
        $(".edit-pci-ok").click(function () {
            if (!$('#updateTextName').val()) {
                alert('请输入分类名')
                return false
            }
            if (!parent_div.attr("data-id")) {
                alert('非法操作')
                return false
            }
            $.post('/admin/commodity/api_classify/update_classify',
                {
                    id: parent_div.attr("data-id"),
                    name: $("#updateTextName").val(),
                    img: '',
                    parent: 0,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                function (data) {
                    if (data.errorCode) {
                        alert(data.errorMsg)
                    }
                    else {
                        parent_classify_load(data.data)
                    }
                }, 'json');
        })
    })
    $(".parent_classify_list").on('click', '.parent_classify', function () {
        let id = $(this).parent().attr('data-id');
        console.log(id)
        $(".add_children_classify_box").attr('data-id', id);
        $("#add_children_classify").attr('data-id', id);
        get_children(id);
    })

    function get_children(id) {
        loading.show()
        $.post('/admin/commodity/api_classify/get_children_classify',
            {
                parent: id,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            function (data) {
                children_classify_load(data.data);
                loading.hide()
            }, 'json');
    }

    function parent_classify_load(data) {
        var html = '';
        for (value in data) {
            html += '<div class="parent_classify_info col-md-12" data-id="' + data[value]['commodity_classify_id'] + '">\n' +
                '                        <span class="parent_classify col-md-10">' + data[value]['classify_name'] + '</span>\n' +
                '                        <span class="c-danger edit-pci-minus glyphicon glyphicon-minus" aria-hidden="true"></span>\n' +
                '                        <span class="glyphicon empty-pci-empty">&ensp;&ensp;</span>\n' +
                '                        <span class="glyphicon glyphicon-edit c-waring edit-pci-edit" aria-hidden="true"></span>\n' +
                '                    </div>'
        }
        $(".parent_classify_list").html(html)
        $(".parent_classify").eq(0).click()
    }

    $(".parent_classify").eq(0).click()
</script>
<script src="{{asset(env("CDN_HOST")."/public/resource/webuploader/webuploader.nolog.min.js")}}"></script>
<script>
    var up_img_url = '';
    var uploadInit = function (config) {
        var uploader = WebUploader.create(config);

        //获取服务器响应状态(相关业务逻辑应在此写)
        uploader.on('uploadAccept', function (object, ret) {
            data = ret;
            // console.table(data)
            if (data.errorCode == 0) {
                //上传成功之后，展示图片
                up_img_url = data.data.url;
                $("#upload_img").attr("src", up_img_url);
                $("#pic_url").attr("value", up_img_url);
                $(".pic-msg .errormsg").html("");
                $("#select-picture").modal("hide");
            } else {
                alert(data.errorMsg);
            }
        })
        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '<p class="state">等待上传...</p>' +
                '</div>'
            )
                , $img = $li.find('img');

            // $list为容器jQuery实例
            var $list = $("#uploaderList");

            //单次上传多个文件请修改方法为 append
            $list.html($li);
            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr('src', src);
            });
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo($li).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');

            $percent.css('width', percentage * 100 + '%');
        });
        //上传成功触发
        uploader.on('uploadSuccess', function (file) {
            $('#' + file.id).find('p.state').text('已上传');
        });
        //上传失败触发
        uploader.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上传出错');
        });
        //无论成功失败都会触发
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').fadeOut();
        });
        return uploader;
    }

    uploader = uploadInit({
        //formData 携带的form参数
        formData: {
            // '_token': $('meta[name="csrf-token"]').attr('content'),
            'token': '{{env("UPLOAD_TOKEN")}}'
        },
        // 验证文件总数量, 超出则不允许加入队列。
        fileNumLimit: 1,
        //自动上传的开关
        auto: true,
        // swf文件路径
        swf: '{{asset(env("CDN_HOST")."/public/resource/webuploader/Uploader.swf")}}',
        //设置文件上传域的name
        fileVal: 'file',
        // 文件接收服务端。
        server: '{{env("UPLOAD_URL")}}',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#uploaderPicker',

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        // resize: false,
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        },
        //缩略图属性
        thumb: {
            width: 320,
            height: 180,

            // 图片质量，只有type为`image/jpeg`的时候才有效。
            quality: 70,

            // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
            allowMagnify: true,

            // 是否允许裁剪。
            crop: true,

            // 为空的话则保留原有图片格式。
            // 否则强制转换成指定的类型。
            type: 'image/jpeg'
        }
    });
    //选择文件触发
    $("#uploader").on('click', '.webuploader-pick', function () {
        up_img_url = '';
        $(this).next().find("label").click()
    })
    //单文件时重置
    $("#uploader").on('click', 'label', function () {
        up_img_url = '';
        uploader.reset()
    })
    //手动上传提示
    $("#uploader").on('click', '#ctlBtn', function () {
        up_img_url = '';
        uploader.upload()
    });
</script>